<div class="modal fade collection-links" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h3 class="modal-title">Links collection</h3>
			</div>

			{{#with links}}
				<div class="modal-body">
					<div class="collection-links-options">
						<input class="radio-inline" type="checkbox" checked="{{groupLinks}}" id="groupLinks">
						<label for="groupLinks">Group links</label>

						<input class="radio-inline" type="checkbox" checked="{{addTag}}" id="addTag">
						<label for="addTag">Add the <b>&lt;script&gt;</b> tag</label>

						<input class="radio-inline" type="checkbox" checked="{{addProtocol}}" id="addProtocol">
						<label for="addProtocol">Add the <b>https:</b></label>

						<input class="radio-inline" type="checkbox" checked="{{enableSri}}" id="enableSRI">
						<label for="enableSRI">Enable SRI</label>
					</div>

					{{#if enableSri && sriProgress < 100}}
						<div class="computing-hashes">
							Please wait while we compute the SRI hashes...

							<div class="progress">
								<div class="progress-bar" role="progressbar" style="width: {{sriProgress}}%"></div>
							</div>
						</div>
					{{else}}
						{{#if showSriWarning}}
							<div class="alert alert-warning sri-warning" role="alert">
								Some files in your collection contain UTF-8 characters.
								Due to a <a href="https://code.google.com/p/chromium/issues/detail?id=527286" target="_blank">bug in Google Chrome</a>, we disabled SRI for those files.
							</div>
						{{/if showSriWarning}}

						{{#if js}}
							<h4 class="strikethrough"><span>JS</span></h4>

							{{#if groupLinks}}
								<div class="grouped-link">
									<div decorator="select">{{js[0]}}</div>

									{{#if hasFlash}}
										<button class="btn btn-default btn-copy" decorator="zeroClipboard" data-clipboard-text="{{js[0]}}">
											<i class="fa fa-copy"></i> Copy
										</button>
									{{/if hasFlash}}
								</div>
							{{else}}
								{{#each js}}
									<div class="collection-file">
										<div class="row">
											<div class="col-xs-{{hasFlash ? 22 : 24}}">
												<div decorator="select">{{this}}</div>
											</div>

											{{#if hasFlash}}
												<div class="col-xs-2 collection-file-copy-wrapper">
													<i class="fa fa-copy clickable" decorator="zeroClipboard" data-clipboard-text="{{this}}"></i>
												</div>
											{{/if hasFlash}}
										</div>
									</div>
								{{/each js}}
							{{/if groupLinks}}
						{{/if js}}

						{{#if css}}
							<h4 class="strikethrough"><span>CSS</span></h4>

							{{#if groupLinks}}
								<div class="grouped-link">
									<div decorator="select">{{css[0]}}</div>

									{{#if hasFlash}}
										<button class="btn btn-default btn-copy" decorator="zeroClipboard" data-clipboard-text="{{css[0]}}">
											<i class="fa fa-copy"></i> Copy
										</button>
									{{/if hasFlash}}
								</div>
							{{else}}
								{{#each css}}
									<div class="collection-file">
										<div class="row">
											<div class="col-xs-{{hasFlash ? 22 : 24}}">
												<div decorator="select">{{this}}</div>
											</div>

											{{#if hasFlash}}
												<div class="col-xs-2 collection-file-copy-wrapper">
													<i class="fa fa-copy clickable" decorator="zeroClipboard" data-clipboard-text="{{this}}"></i>
												</div>
											{{/if hasFlash}}
										</div>
									</div>
								{{/each css}}
							{{/if groupLinks}}
						{{/if css}}

						{{#if other}}
							<h4 class="strikethrough"><span>Other</span></h4>

							{{#each other}}
								<div class="collection-file">
									<div class="row">
										<div class="col-xs-{{hasFlash ? 22 : 24}}">
											<div decorator="select">{{this}}</div>
										</div>

										{{#if hasFlash}}
											<div class="col-xs-2 collection-file-copy-wrapper">
												<i class="fa fa-copy clickable" decorator="zeroClipboard" data-clipboard-text="{{this}}"></i>
											</div>
										{{/if hasFlash}}
									</div>
								</div>
							{{/each other}}
						{{/if other}}
					{{/if}}
				</div>
			{{/with links}}
		</div>
	</div>
</div>

<script>
	var linkBuilder = require('public/js/utils/build-links');
	var hexToBase64 = require('public/js/utils/hex-to-base64');
	var selectDecorator = require('public/js/decorators/select.js');
	var zeroClipboardDecorator = require('public/js/decorators/zero-clipboard.js');

	component.exports = {
		el: 'body',
		append: true,
		computed: {
			addTag: {
				get: function () {
					return this.get('enableSri') || this.get('_addTag');
				},
				set: function (value) {
					this.set('_addTag', value);
					this.set('_addTagSri', value);
				},
			},
			addProtocol: {
				get: function () {
					return this.get('enableSri') || this.get('_addProtocol');
				},
				set: function (value) {
					this.set('_addProtocol', value);
					this.set('_addProtocolSri', value);
				},
			},
			enableSri: {
				get: function () {
					return this.get('_enableSri') && this.get('_addTag') && this.get('_addProtocol') && !this.get('_groupLinks');
				},
				set: function (value) {
					this.set('_enableSri', value);

					if (value) {
						this.set('_addTag', true);
						this.set('_addProtocol', true);
						this.set('_groupLinks', false);
					} else {
						this.set('_addTag', this.get('_addTagSri'));
						this.set('_addProtocol', this.get('_addProtocolSri'));
						this.set('_groupLinks', this.get('_groupLinksSri'));
					}
				},
			},
			groupLinks: {
				get: function () {
					return !this.get('enableSri') && this.get('_groupLinks');
				},
				set: function (value) {
					this.set('_groupLinks', value);
					this.set('_groupLinksSri', value);
				},
			},
			hashes: function () {
				if (!this.get('groupLinks')) {
					var links = linkBuilder(this.get('collection'), this.get('groupLinks'));
					var allLinks = links.js.concat.apply(links.js, links.css);
					var _this = this;

					allLinks.forEach(function (link) {
						if (app.sriHashes[link] === undefined) {
							app.sriHashes[link] = true;

							$.get(link, function (file) {
								app.sriHashes[link] = !/[^\u0000-\u007F]/.test(file) ? 'sha256-' + hexToBase64(sha256(file)) : null;
								_this.set('_hashes', app.sriHashes);
							}, 'html');
						}
					});

					app.sriHashes.length = Object.keys(app.sriHashes).filter(function (key) {
						return typeof key === 'string' && ~allLinks.indexOf(key) && app.sriHashes[key] !== true;
					}).length;
				}

				return this.get('_hashes') && app.sriHashes;
			},
			links: function () {
				var links = linkBuilder(this.get('collection'), this.get('groupLinks'));
				var addTag = this.get('addTag');
				var enableSri = this.get('enableSri');
				var addProtocol = this.get('addProtocol');
				var hashes = enableSri && this.get('hashes');

				links.js = links.js.map(function (link, index, collection) {
					link = addProtocol ? 'https:' + link : link;
					link = addTag
						? '<script ' + (enableSri && hashes[collection[index]] ? 'crossorigin="anonymous" integrity="' + hashes[collection[index]] + '" ' : '') +  'src="' + link + '"><\/script>'
						: link;

					return link;
				});

				links.css = links.css.map(function (link, index, collection) {
					link = addProtocol ? 'https:' + link : link;
					link = addTag
						? '<link rel="stylesheet" ' + (enableSri && hashes[collection[index]] ? 'crossorigin="anonymous" integrity="' + hashes[collection[index]] + '" ' : '') + 'href="' + link + '">'
						: link;

					return link;
				});

				links.other = links.other.map(function (link) {
					return addProtocol ? 'https:' + link : link;
				});

				return links;
			},
			sriProgress: function () {
				return this.get('hashes').length / (this.get('links').js.length + this.get('links').css.length) * 100;
			},
			showSriWarning: function () {
				var hashes = this.get('hashes');
				var links = linkBuilder(this.get('collection'), this.get('groupLinks'));
				var allLinks = links.js.concat.apply(links.js, links.css);

				return !!Object.keys(hashes).filter(function (key) {
					return typeof key === 'string' && ~allLinks.indexOf(key) && hashes[key] === null;
				}).length;
			},
		},
		data: function () {
			return {
				addTag: false,
				enableSri: false,
				groupLinks: true,
				addProtocol: true,
				linkBuilder: linkBuilder,
				_hashes: {},
			};
		},
		decorators: {
			select: selectDecorator,
			zeroClipboard: zeroClipboardDecorator
		},
		oninit: function () {
			if (!Ractive.isServer) {
				this.set('hasFlash', !ZeroClipboard.isFlashUnusable());
			}
		},
		onrender: function () {
			var _this = this;

			$(this.find('.modal'))
				.modal()
				.on('hidden.bs.modal', function() {
					_this.teardown();
				});
		},
		onunrender: function () {
			$(this.find('.modal')).modal('hide');
		},
	};
</script>
